<!--  -->
<template>
  <div class="order-pay">
    <Nav title="订单详情">
      <template v-slot:right>
        <span class="cancel" @click="delFlag=true">取消订单</span>
      </template>
      <template v-slot:left>
        <span class="back-icon" @click="$router.back()"></span>
      </template>
    </Nav>
    <div class="z-body">
      <!-- 订单状态 -->
      <div class="order-status-wrapper">
        <div class="order-status flex justify-between">
          <span class="f-18 color-white f-medium">待支付</span>
          <!-- 待付款 -->
          <div>
            <div class="f-14 color-white text-left">剩余：{{timerCount}}</div>
          </div>
        </div>
        <div class="bottom"></div>
        <div class="address f-14 f-medium">
          <template v-if="c_address()">
              <router-link tag="div" :to="{name:'addresslists',query:{order_no:$route.params.order_no}}">
            <div class="flex aligin-center">
              <span class="address-icon mr-10"></span>
              <span class="mr-18">{{orderDetail.address.consigner}}</span>
              <span>{{orderDetail.address.mobile}}</span>
            </div>
            <div class="mt-14 line-22 ml-30">
              <span>{{orderDetail.address.alias}}</span>
            </div>
              </router-link>
          </template>
          <template v-else>
            <router-link
              class="color-orange f-15 f-bold pl-20"
              :to="{name:'addressadd',query:{order_no:orderDetail.order_no}}"
            >
              你还未设置收货地址，请填写收货地址
              <span class="ml-8 right-arrow"></span>
            </router-link>
          </template>
        </div>
      </div>
      <div class="title-tip">订单明细</div>
      <div class="shop-list">
        <template v-for="(item,index) in orderDetail.goods.list">
          <div class="order-list" :key="index">
            <div class="order-item">
              <div class="item-header flex justify-center aligin-center border-bottom-1px">
                <img class="shop-logo" :src="item.shop_logo" />
                <span class="title">{{item.shop_name}}</span>
                <!-- <span class="link">进店</span> -->
              </div>
              <template v-for="(_item,_index) in item.goods">
                <div :key="_index">
                  <div class="item-body">
                    <div class="flex aligin-center">
                      <img class="pic" :src="_item.image" alt />
                      <div class="info">
                        <div class="product-name ellipsis-line2">{{_item.goods_name}}</div>
                        <div class="tag flex">
                          <span>{{_item.sku_name}}</span>
                        </div>
                        <div class="discount flex justify-between">
                          <span class="discount-money">￥{{_item.price}}</span>
                          <span>X{{_item.num}}</span>
                        </div>
                        <!-- <div
                          class="discount-new flex aligin-center"
                          @click="noticeFlag=true"
                          v-if="parseFloat(_item.reduce)!=0"
                        >
                          <span class="discount-money-new">优惠:{{_item.reduce}}</span>
                          <span>新用户减免</span>
                          <span class="help-icon"></span>
                        </div>-->
                      </div>
                    </div>
                  </div>
                  <div class="bottom flex aligin-center">
                    <span class="bottom-tag">参与活动</span>
                    <span>{{_item.activity_name}}</span>
                  </div>
                </div>
              </template>
              <div class="order-total border-top-1px flex justify-center">
                <div class="money">共{{item.c_og}}件商品 &nbsp;&nbsp; 小计:￥{{item.price}}</div>
                <div class="express">快递费：￥{{item.shipping_money}}</div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="order-info-list">
      <div class="info-item border-bottom-1px flex justify-between aligin-center">
        <span>共计</span>
        <span>{{orderDetail.goods.count}}件</span>
      </div>
      <div class="info-item border-bottom-1px flex justify-between aligin-center">
        <span>快递费</span>
        <span>￥{{orderDetail.goods.total_shipping_money}}</span>
      </div>
      <div
        class="info-item border-bottom-1px flex justify-between aligin-center"
        @click="payMethodFlag=true"
      >
        <span>支付方式</span>
        <span class="pay-method">{{payMethod}}</span>
        <span class="arrow-right"></span>
      </div>
    </div>
    <div class="confirm-wrap flex">
      <span class="confirm-money">￥{{orderDetail.goods.total_price}}</span>
      <span class="confirm-discount">已优惠￥{{orderDetail.goods.discount}}</span>
      <div class="confirm-btn" @click="payConfirm">确认支付</div>
    </div>
    <!-- 选择支付方式 -->
    <div class="pay-method-mask" v-if="payMethodFlag" @click="payMethodFlag=false">
      <div class="pay-method">
        <div class="pay-head">
          选择支付方式
          <span class="close"></span>
        </div>
        <div class="method-wrap">
          <div class="flex justify-between aligin-center" @click="paySelected(0)">
            <span class="alipay"></span>
            <span class="ml-10 mr-auto">支付宝(推荐使用)</span>
            <span :class="[payIndex==0?'pay-selected':'circle']"></span>
          </div>
          <div class="mt-22 flex justify-between aligin-center" @click="paySelected(1)">
            <span class="wx-pay"></span>
            <span class="ml-10 mr-auto">微信支付</span>
            <span :class="[payIndex==1?'pay-selected':'circle']"></span>
          </div>
          <div class="mt-22 flex justify-between aligin-center" @click="paySelected(2)">
            <span class="rest"></span>
            <span class="ml-10 mr-auto">余额支付</span>
            <span :class="[payIndex==2?'pay-selected':'circle']"></span>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除对话框 -->
    <div
      class="del-dialog-mask flex justify-center aligin-center"
      v-if="delFlag"
      @click="delFlag=false"
    >
      <div class="del-dialog" @click.stop>
        <div class="title">您确定取消该订单吗？</div>
        <div class="option flex justify-between">
          <span class="close-btn" @click="delFlag=false">我再想想</span>
          <span class="confirm-btn" @click="delOrder">确认删除</span>
        </div>
      </div>
    </div>
    <!-- 新用户减免说明 -->
    <div
      class="notice-mask flex justify-center aligin-center"
      v-if="noticeFlag"
      @click="noticeFlag=false"
    >
      <div class="notice" @click.stop>
        <div class="title">新用户减免说明</div>
        <div>1. 新用户是指本账号从未在平台生产已支付订单的用户</div>
        <div>2. 首次购买多个商品时,若多个商品都有新用户减免，只计算减免金额最高的商品。</div>
        <div class="confirm-btn" @click="noticeFlag=false">我知道了</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  orderDetail,
  unifiedOrder,
  orderStatus,
  cancelOrder,
  orderDestroy,
  shippingStatus,
  orderConfirm,
  weLogin,
  detail_ty,
  ty_pay,
  ty_close_order
} from '../../api/api'
import Nav from '../../components/Nav'
import wxPay from '../../utils/wxPay'
export default {
  components: { Nav },
  data() {
    return {
      orderTimer:null,
      noticeFlag: false, //新用户减免说明flag
      timerCount: '',
      timer: null,
      deliverFlag: true, //快递信息加载flag
      deliverInfo: { detail: [{}] }, //物流信息
      payMethodFlag: false, //支付方式
      delFlag: false, //删除订单
      payIndex: 2,
      orderDetail: {
        order_no: '14',
        goods: { list: [] },
        activity: {},
        address: {}
      } //订单详情
    }
  },
  computed: {
    payMethod() {
      switch (this.payIndex) {
        case 0:
          return '支付宝(推荐使用)'
        case 1:
          return '微信支付'
        case 2:
          return '余额支付'
      }
    }
  },
  watch: {},
  methods: {
      //请求幸运码
    _requestLuckCode() {
      orderStatus({ order_no: this.$route.params.order_no }).then(
        ({ data: { result } }) => {
          if (result.order_status != 0) {
            // this.$set(this.orderDetail, "order_status", result.order_status);
            // this.payFlag = false;
            // this.tipFlag = true;
            // this.luckCode = result.numbers + "";
            this.$router.replace({name:"payConfirm",query:{from:"shoppingCar"}})
            clearInterval(this.orderTimer);
            this.orderTimer = null;
          }
        }
      );
    },
    // 支付
    payConfirm() {
      let payType = 0
      switch (this.payIndex) {
        case 0:
          //支付宝
          payType = 2
          break
        case 1:
          //微信
          payType = 1
          break
        case 2:
          //余额
          payType = 5
          break
      }
      let params = { order_no: this.$route.params.order_no, pay_type: payType }
      ty_pay(params).then(
        res => {
          if (payType == 1) {
            if (typeof WeixinJSBridge == 'undefined') {
              if (document.addEventListener) {
                document.addEventListener(
                  'WeixinJSBridgeReady',
                  wxPay(res.data.result.config, res => {}),
                  false
                )
              } else if (document.attachEvent) {
                document.attachEvent(
                  'WeixinJSBridgeReady',
                  wxPay(res.data.result.config, res => {})
                )
                document.attachEvent(
                  'onWeixinJSBridgeReady',
                  wxPay(res.data.result.config, res => {})
                )
              }
            } else {
              wxPay(
                res.data.result.config,
                res => {
                  this._requestLuckCode();
                  this.orderTimer = setInterval(() => {
                    this._requestLuckCode();
                  }, 1000);
                },
                res => {
                  console.log('error', res)
                }
              )
            }
          } else if (payType == 2) {
            var ua = navigator.userAgent.toLowerCase()
            if (ua.indexOf('micromessenger') != -1) {
              if (
                ua.indexOf('iphone') != -1 ||
                ua.indexOf('ipad') != -1 ||
                ua.indexOf('ipod') != -1
              ) {
                this.$router.push({
                  name: 'info',
                  params: { url: res.data.result.config }
                })
              } else {
                this.$router.push({
                  name: 'info',
                  params: { url: res.data.result.config }
                })
              }
            } else {
              this.$router.push({
                name: 'info',
                params: { url: decodeURIComponent(res.data.result.config) }
              })  
            }
          } else {
            this.$router.replace({ name: 'payConfirm',query:{from:"shoppingCar"} })
          }
        },
        res => {
          console.log('res')
          // this.payFlag = false;
          if (res == "公众号微信账号尚未授权") {
            this.$dialog
              .confirm({
                message: "微信支付需要微信授权登入，请微信登入授权"
              })
              .then(() => {
                return weLogin({ from: "authorization" });
              })
              .then(res => {
                window.location.href = res.data.result;
              });
          }
        }
      )
    },
    c_address() {
      return !(this.orderDetail.address instanceof Array)
    },
    paySelected(index) {
      this.payIndex = index
    },
    //取消订单
    delOrder() {
      ty_close_order({order_no: this.$route.params.order_no}).then(({data:{result}})=>{
         this.delFlag=false
         this.$router.back()
      })
    }
  },
  created() {},
  mounted() {
    detail_ty({ order_no: this.$route.params.order_no }).then(res => {
      this.orderDetail = res.data.result
      if (res.data.result.order_status == 6) {
        this.$router.back()
        return
      }
      let closeSecond = res.data.result.closed_at
      if (closeSecond < 0) {
        this.timerCount = '订单已关闭'
      } else {
        let minute =
          Math.floor(closeSecond / 60) < 10
            ? '0' + Math.floor(closeSecond / 60)
            : Math.floor(closeSecond / 60)
        let second =
          closeSecond % 60 < 10 ? '0' + (closeSecond % 60) : closeSecond % 60
        this.timerCount = minute + '分' + second + '秒'
      }
      this.timer = setInterval(() => {
        closeSecond--
        if (closeSecond < 0) {
          this.timerCount = '订单已关闭'
          clearInterval(this.timer)
        } else {
          let minute =
            Math.floor(closeSecond / 60) < 10
              ? '0' + Math.floor(closeSecond / 60)
              : Math.floor(closeSecond / 60)
          let second =
            closeSecond % 60 < 10 ? '0' + (closeSecond % 60) : closeSecond % 60
          this.timerCount = minute + '分' + second + '秒'
        }
      }, 1000)
    })
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
    clearInterval(this.orderTimer)
    this.orderTimer = null
  } //生命周期 - 销毁完成
}
</script>
<style lang='less' scoped>
@import url('../../assets/style/mixin');
.f-15 {
  font-size: 15px;
}
.color-orange {
  color: orange;
  line-height: 70px;
  text-align: center;
}
.right-arrow {
  display: inline-block;
  width: 14px;
  height: 14px;
  .bg-image('../../assets/imgs/arrow-right-b');
  background-size: 100% 100%;
}
.order-pay {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  .z-body {
    height: calc(100% - 264px);
    overflow-y: auto;
  }
  .msg {
    display: inline-block;
    width: 17px;
    height: 16px;
    .bg-image('../../assets/imgs/msg');
    background-size: 100% 100%;
  }
  .back-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    .bg-image('../../assets/imgs/back');
    background-size: 100% 100%;
  }
  .order-status-wrapper {
    position: relative;
    height: 168px;
    width: 100%;
    border-bottom: 1px solid #eaeaea;
    .order-status {
      padding: 21px 16px 0;
      height: 108px;
      box-sizing: border-box;
      .bg-image('../../assets/imgs/order-detail-bg');
      background-size: 100% 100%;
    }
    .text-left {
      text-align: left;
    }
    .address {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 100px;
      width: 345px;
      box-sizing: border-box;
      background: #fff;
      padding: 15px 23px 0 10px;
      border-radius: 5px;
    }

    .line-22 {
      line-height: 22px;
    }
    .address-icon {
      width: 18px;
      height: 18px;
      .bg-image('../../assets/imgs/address');
      background-size: 100% 100%;
    }
    .bottom {
      height: 60px;
    }
  }
  .title-tip {
    margin-top: 30px;
    text-indent: 28px;
    font-size: 15px;
    font-weight: bold;
  }
  .order-list {
    margin: 12px 15px;
    box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
    border-radius: 5px;
    .order-item {
      padding-left: 12px;
      background: #fff;
      border-radius: 5px;
      .item-header {
        height: 53px;
        .circle {
          margin-right: 14px;
          width: 17px;
          height: 17px;
          border: 1px solid rgba(202, 202, 202, 1);
          border-radius: 50%;
        }
        .shop-logo {
          margin-right: 8px;
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
        .link {
          margin-right: 18px;
          width: 43px;
          height: 21px;
          border: 1px solid rgba(232, 48, 56, 1);
          border-radius: 5px;
          line-height: 21px;
          text-align: center;
          color: rgba(232, 48, 56, 1);
        }
        .title {
          font-size: 12px;
          margin-right: auto;
        }
      }
      .item-body {
        padding: 20px 13px 21px 0;
        .circle {
          flex-shrink: 0;
          margin-right: 14px;
          width: 17px;
          height: 17px;
          border: 1px solid rgba(202, 202, 202, 1);
          border-radius: 50%;
        }
        .pic {
          margin-right: 7px;
          flex-shrink: 0;
          width: 103px;
          height: 103px;
          border-radius: 5px;
        }
        .info {
          flex: 1;
          .product-name {
            font-size: 13px;
            line-height: 16px;
            height: 32px;
          }
          .tag {
            padding: 7px;
            margin-top: 11px;
            display: inline-block;
            font-size: 12px;
            color: rgba(188, 188, 188, 1);
            background: rgba(249, 249, 249, 1);
            border-radius: 3px;
            .icon {
              margin-left: 15px;
              width: 12px;
              height: 6px;
              background: url('../../assets/imgs/arrow-down-b.png');
              background-size: 100% 100%;
            }
          }
          .lint {
            margin-top: 12px;
            color: #f98c22;
          }
          .discount {
            margin-top: 20px;
            font-size: 15px;
            .discount-money {
            }
          }
        }
        .discount-new {
          justify-content: flex-end;
          margin-top: 20px;
          font-size: 12px;
          .discount-money-new {
            margin-right: 20px;
          }
          .help-icon {
            margin-left: 4px;
            height: 15px;
            width: 15px;
            background: url('../../assets/imgs/new-info.png');
            background-size: 100% 100%;
          }
        }
        .price-number {
          justify-content: flex-end;
          margin-top: 17px;
          font-size: 15px;
          color: rgba(252, 61, 66, 1);
        }
        .price {
          margin-right: 57px;
        }
      }
      .bottom {
        padding: 10px 10px;
        height: 55px;
        color: #ea373f;
        font-size: 12px;
        .bottom-tag {
          margin-right: 20px;
          color: #fff;
          padding: 4px 5px;
          background: rgba(232, 48, 56, 1);
          border-radius: 3px;
        }
      }
      .order-total {
        padding-right: 24px;
        box-sizing: border-box;
        height: 71px;
        flex-direction: column;
        .money {
          font-size: 15px;
          text-align: right;
        }
        .express {
          margin-top: 11px;
          font-size: 12px;
          color: #e83038;
          text-align: right;
        }
      }
    }
  }
  .order-info-list {
    margin: 14px 15px 0;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 13px;
    box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
    border-radius: 5px;
    .info-item {
      padding: 0 10px;
      height: 42px;
      box-sizing: border-box;
    }
    .pay-method {
      margin-left: auto;
      color: #999999;
    }
    .arrow-right {
      margin-left: 5px;
      height: 15px;
      width: 15px;
      background: url('../../assets/imgs/arrow-right@2x.png');
      background-size: 100% 100%;
    }
  }
  .confirm-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #fff;
    .confirm-money {
      flex: 1;
      font-size: 19px;
      color: #e6333b;
      line-height: 52px;
      text-align: center;
    }
    .confirm-discount {
      margin-right: 16px;
      color: #838383;
      font-size: 14px;
      line-height: 52px;
    }
    .confirm-btn {
      height: 100%;
      width: 168px;
      font-size: 19px;
      color: #fff;
      line-height: 52px;
      text-align: center;
      background: linear-gradient(
        -90deg,
        rgba(232, 48, 56, 1),
        rgba(247, 88, 151, 1)
      );
    }
  }
  .pay-method-mask {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 500;
    background: rgba(0, 0, 0, 0.3);
    .pay-method {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 266px;
      width: 100%;
      background: rgba(255, 255, 255, 1);
      border-radius: 10px 10px 0 0;
      animation: up 0.3s ease 1;
      @keyframes up {
        0% {
          bottom: -266px;
        }
        100% {
          bottom: 0;
        }
      }
      .pay-head {
        position: relative;
        height: 51px;
        text-align: center;
        font-size: 18px;
        line-height: 51px;
      }
      .method-wrap {
        margin: 36px 30px 0;
        font-size: 17px;
      }
      .close {
        position: absolute;
        top: 17px;
        right: 20px;
        height: 16px;
        width: 16px;
        background: url('../../assets/imgs/close-dialog@3x.png');
        background-size: 100% 100%;
      }

      .tip {
        align-items: flex-end;
      }
      .close {
        width: 16px;
        height: 16px;
        .bg-image('../../assets/imgs/close-dialog');
        background-size: 100% 100%;
      }
      .alipay {
        width: 25px;
        height: 25px;
        background: url('../../assets/imgs/alipay.png');
        background-size: 100% 100%;
      }
      .wx-pay {
        width: 25px;
        height: 25px;
        background: url('../../assets/imgs/wx-pay.png');
        background-size: 100% 100%;
      }
      .rest {
        width: 25px;
        height: 25px;
        background: url('../../assets/imgs/rest.png');
        background-size: 100% 100%;
      }
      .circle {
        height: 19px;
        width: 19px;
        box-sizing: border-box;
        border: 1px solid rgba(88, 88, 88, 1);
        border-radius: 50%;
      }
      .pay-selected {
        height: 19px;
        width: 19px;
        .bg-image('../../assets/imgs/pay-selected');
        background-size: 100% 100%;
      }
    }
  }
  .del-dialog-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    background: rgba(0, 0, 0, 0.3);
    .del-dialog {
      padding: 34px 27px 21px;
      z-index: 301;
      width: 225px;
      height: 150px;
      box-sizing: border-box;
      border-radius: 5px;
      background: #fff;
      animation: show 0.3s 1;
      box-shadow: 14px 25px 16px 7px rgba(0, 0, 0, 0.05);
      @keyframes show {
        0% {
          opacity: 0;
          transform: scale(1.5);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }
      .title {
        font-size: 15px;
        line-height: 29px;
        text-align: center;
      }
      .title-fu {
        font-size: 12px;
        color: #848484;
        text-align: center;
      }
      .option {
        margin-top: 26px;
        .close-btn {
          width: 76px;
          height: 27px;
          border: 1px solid rgba(252, 64, 111, 1);
          border-radius: 14px;
          font-size: 13px;
          line-height: 27px;
          text-align: center;
          color: #fc406f;
        }
        .confirm-btn {
          width: 76px;
          height: 27px;
          background: rgba(252, 64, 111, 1);
          border-radius: 14px;
          color: #fff;
          font-size: 13px;
          line-height: 27px;
          text-align: center;
        }
      }
    }
  }
  .notice-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    background: rgba(0, 0, 0, 0.3);
    .notice {
      padding: 44px 27px 21px;
      z-index: 301;
      width: 300px;
      box-sizing: border-box;
      border-radius: 5px;
      background: #fff;
      font-size: 13px;
      line-height: 34px;
      animation: show 0.3s 1;
      box-shadow: 14px 25px 16px 7px rgba(0, 0, 0, 0.05);
      @keyframes show {
        0% {
          opacity: 0;
          transform: scale(1.5);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }
      .title {
        margin-bottom: 40px;
        font-size: 18px;
        text-align: center;
      }
      .confirm-btn {
        margin: 20px auto 0;
        width: 200px;
        height: 40px;
        font-size: 15px;
        text-align: center;
        line-height: 40px;
        border-radius: 100px;
        color: #fff;
        background: linear-gradient(
          -90deg,
          rgba(237, 64, 72, 1),
          rgba(251, 104, 113, 1)
        );
      }
    }
  }
}
</style>